// @ts-nocheck==
import { reactive, ref, onMounted, onUnmounted, watch, nextTick } from "vue"
import { useDebounceFn } from "@vueuse/core"
import { useRouter } from "vue-router"

import useApi from "@/api/use增查api"
import * as util from "@/utils"
import { 提示enum } from "amtf/utils"

import { ElMessage, ElMessageBox } from "element-plus"
import use路由 from "@/hooks/use路由"
import { use快捷键 } from "amtf/hooks/use快捷键"

export default function (cfg = {}) {
    console.log(`use详情_抽屉式 执行 ing👇`)
    const list = cfg.list
    const 元件袋 = cfg.list.元件袋
    // const 子表ref = cfg.子表ref
    // console.log(`子表ref 👉`, 子表ref)
    const a = reactive({
        变化了: false,
        已熟: false,
    })
    // const 变化了 = ref(false)
    let 监听变化 = true

    const 单项 = reactive({})
    const 弹窗否 = ref(false)
    // const formRef = ref<ElForm>(null);
    const formRef = ref<any>(false)
    const api = useApi(cfg.url)
    const 路由 = use路由()

    let 源单项: 单项
    const 初始化 = async (单项a = null, 初始值 = null) => {
        console.log(`use详情_抽屉式 初始化 ing👇`)
        a.变化了 = false
        // 监听变化 = false
        if (!单项a) {
            // 新增👇
            let 单项模板 = util.深拷贝(元件袋.取元件单项模板())
            if (初始值) {
                单项模板 = Object.assign(单项模板, 初始值)
            }
            util.对象重予(单项, 单项模板)
            if (cfg.新增后处理) {
                // console.log(`单项 👉`,单项)
                cfg.新增后处理(单项, 单项a)
            }
        } else {
            // 修改👇
            const res = await api.查({ id: 单项a.id })
            console.log(`use详情_抽屉式 查res 👉`, res)
            if (res.code === 0) {
                util.对象重予(单项, res.data)
                源单项 = util.深拷贝(res.data)

                // if (cfg.展示前处理) {
                //     // console.log(`单项 👉`,单项)
                //     cfg.展示前处理(单项)
                // }

            }
        }
        // 修改 单项 后，等页面更新渲染完成👇
        await nextTick();
        a.变化了 = false

        a.已熟 = true
        弹窗否.value = true
    }

    const router = useRouter()

    const 新增子级_废留 = 父级id => {
        let 单项模板 = 元件袋.取元件单项模板()
        单项模板.父级id = 父级id
        util.对象重予(单项, 单项模板)
        弹窗否.value = true
    }

    const 复制 = (单项a = 单项) => {
        console.log(`复制 单项a 👉`, 单项a)
        监听变化 = false
        let 单项模板 = util.深拷贝(单项a)
        单项模板.id = 0
        util.对象重予(单项, 单项模板)
        if (cfg.复制后处理) {
            cfg.复制后处理(单项)
        }
        弹窗否.value = true
        // 监听变化 = true
    }

    const 保存 = async () => {
        if (!a.变化了) return
        formRef.value
            ?.validate(async (valid, fields) => {
                if (!valid) {
                    util.提示(提示enum.出错, '内容不符合要求 ')
                    return
                }
                let res
                // console.log(`单项 👉`, 单项)
                if (cfg.保存前处理) {
                    // console.log(`单项 👉`,单项)
                    cfg.保存前处理(单项)
                }
                // return
                if (!单项.id || 单项.id < 0) {
                    res = await api.增(单项)
                } else {
                    // const 变动单项 = util.取变动单项(源单项, 单项)
                    // const 变动单项 = util.取单项_仅变动值(源单项, 单项)
                    // console.log(`变动单项 👉`, 变动单项)
                    // res = await api.改(变动单项)
                    // return
                    res = await api.改(单项)
                }
                if (res.code === 0) {
                    util.提示()
                    收工()
                }
            })
            .catch(({ errors, fields }) => {
                console.log(`errors 👉`, errors)
            })
    }

    const 删 = async () => {
        ElMessageBox.confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(async () => {
                const res = await api.删({ id: 单项.id })
                if (res.code === 0) {
                    util.提示(提示enum.成功, '删除成功', "删除")
                    list.收工()
                }
            })
            .catch(() => { })
    }

    const 快捷键cfg: 快捷键cfg = {
        ctrl_s: event => {
            // console.log(`use详情抽屉式 快捷键cfg ing👇`)
            if (!弹窗否.value) return
            event.preventDefault()
            // 2. 阻止当前元素的其他事件监听和冒泡
            // uselist可能也绑定了快捷键，执行保存操作，导致数据又改回来了😓
            event.stopImmediatePropagation();
            保存()
        },
        esc: event => {
            if (!弹窗否.value) return
            // event.preventDefault();
            关窗()
        },
    }
    const 快捷键 = use快捷键(快捷键cfg)

    const 关窗 = () => {
        console.log(`关窗 ing👇`)
        弹窗否.value = false
    }
    // 验证规则
    const rule = {
        行业: [
            {
                required: true,
                message: "必填项",
                trigger: ["input", "blur"],
            },
        ],
        客户单位: [
            {
                required: true,
                message: "必填项",
                trigger: ["input", "blur"],
            },
        ],
        图片: [
            {
                required: true,
                message: "",
                trigger: ["input", "blur"],
            },
        ],
    }
    if (cfg.rule) {
        Object.assign(rule, cfg.rule)
    }

    watch(单项, (newValue, oldValue) => {
        // console.log(`单项变化了 newValue👉`,newValue)
        // console.log(`单项变化了 oldValue👉`,oldValue)
        a.变化了 = true
    })

    function 收工() {
        关窗()
        list.初始化()
    }

    const 下一步 = async () => {
        if (a.变化了) {
            let res = await 保存()
            console.log(`保存 res 👉`, res)
            if (!res) {
                return false
            }
        }
        let res = await api.改({ id: 单项.id, 动作: '下一步' })
        if (res.code === 0) {
            util.提示()
            收工()
        }
    }

    return {
        下一步,
        元件袋,
        a,
        删,
        复制,
        新增子级_废留,
        关窗,
        formRef,
        rule,
        保存,
        弹窗否,
        单项,
        初始化,
    }
}
